import { PageContainer } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Card, Image, theme } from 'antd';
import React from 'react';

/**
 * 每个单独的卡片，为了复用样式抽成了组件
 * @param param0
 * @returns
 */
const InfoCard: React.FC<{
  title: string;
  index: number;
  desc: string;
  href: string;
}> = ({ title, href, index, desc }) => {
  const { useToken } = theme;

  const { token } = useToken();

  return (
    <div
      style={{
        backgroundColor: token.colorBgContainer,
        boxShadow: token.boxShadow,
        borderRadius: '8px',
        fontSize: '14px',
        color: token.colorTextSecondary,
        lineHeight: '22px',
        padding: '16px 19px',
        minWidth: '220px',
        flex: 1,
      }}
    >
      <div
        style={{
          display: 'flex',
          gap: '4px',
          alignItems: 'center',
        }}
      >
        <div
          style={{
            width: 48,
            height: 48,
            lineHeight: '22px',
            backgroundSize: '100%',
            textAlign: 'center',
            padding: '8px 16px 16px 12px',
            color: '#FFF',
            fontWeight: 'bold',
            backgroundImage:
              "url('https://gw.alipayobjects.com/zos/bmw-prod/daaf8d50-8e6d-4251-905d-676a24ddfa12.svg')",
          }}
        >
          {index}
        </div>
        <div
          style={{
            fontSize: '16px',
            color: token.colorText,
            paddingBottom: 8,
          }}
        >
          {title}
        </div>
      </div>
      <div
        style={{
          fontSize: '14px',
          color: token.colorTextSecondary,
          textAlign: 'justify',
          lineHeight: '22px',
          marginBottom: 8,
        }}
      >
        {desc}
      </div>
      <a href={href} target="_blank" rel="noreferrer">
        了解更多 {'>'}
      </a>
    </div>
  );
};

const Welcome: React.FC = () => {
  const { token } = theme.useToken();
  const { initialState } = useModel('@@initialState');
  return (
    <PageContainer>
      <Card
        style={{
          borderRadius: 8,
        }}
        bodyStyle={{
          backgroundImage:
            initialState?.settings?.navTheme === 'realDark'
              ? 'background-image: linear-gradient(75deg, #1A1B1F 0%, #191C1F 100%)'
              : 'background-image: linear-gradient(75deg, #FBFDFF 0%, #F5F7FF 100%)',
        }}
      >
        <div
          style={{
            backgroundPosition: '100% -30%',
            backgroundRepeat: 'no-repeat',
            backgroundSize: '274px auto',
            backgroundImage:
              "url('https://gw.alipayobjects.com/mdn/rms_a9745b/afts/img/A*BuFmQqsB2iAAAAAAAAAAAAAAARQnAQ')",
          }}
        >
          <div
            style={{
              fontSize: '20px',
              color: token.colorTextHeading,
            }}
          >
            欢迎使用可调速清管器设计展示后台系统
          </div>
          <div
            style={{
              fontSize: '14px',
              color: token.colorTextSecondary,
              lineHeight: '22px',
              marginTop: 16,
              marginBottom: 32,
              width: '100%',
            }}
          >
            <Image width={1100} src="https://s21.ax1x.com/2024/04/13/pFj7N8O.png" />
            <Image width={1000} src="https://s21.ax1x.com/2024/04/13/pFj7U2D.png" />
          </div>

          <div
            style={{
              display: 'flex',
              flexWrap: 'wrap',
              gap: 16,
            }}
          >
            <InfoCard
              index={1}
              href="https://umijs.org/docs/introduce/introduce"
              title="了解 可调速清管器"
              desc="可控速清管器。由钢制骨架（中间骨架）、固定法兰、3-4只聚氨酯皮碗、电子定位发射机和螺栓、螺母等标准件组成，在中间骨架上开有旁通通路，允许部分流体通过清管器。在实际清管作业中，清管器需能够适应管道的起伏变化，顺利通过上坡、下坡、变形管段及弯道。同时，它还需承担清除管道内壁积液、积灰、积蜡等杂质的任务，并将这些杂质推出管道外。然而，随着清管器运行时间的增长，其皮碗会出现磨损，进而改变皮碗与管道内壁之间的摩擦阻力。这些因素都将直接或间接地影响清管器的运行速度，决定清管作业的顺利进行与否，以及所得检测结果的可靠性。"
            />
            <InfoCard
              index={2}
              title="查看 监控页面"
              href="https://ant.design"
              desc="在可控速清管器实际工作过程中，由于周围环境的不断改变，比如管道坡度、管道内部杂质引起的阻力、皮碗与管道表层的摩擦力、清管器的实际速度、电机的电量等各个因素都会发生变化，从而影响清管器的工作效率。通过清管器后方的传感器统计一系列参数，可以有效防止清管器工作时发生故障，并可以通过数据分析的方式不断去优化清管器的工作效率，在这里将清管器的各个参数进行汇总。保证在清管前，能够监控和调试整个清管器系统，保证各个功能正常；在清管结束后，能够完成数据的读取与撰写，以便用于后续的处理与分析"
            />
            <InfoCard
              index={3}
              title="修改 清管器工作参数"
              href="https://procomponents.ant.design"
              desc="在这里主要为参数的设置区，根据不同清管器结构与清管器工况灵活设置相应参数，使得整个速度与控制系统可以用于任何工况和尺寸的管道。"
            />
          </div>
        </div>
      </Card>
    </PageContainer>
  );
};

export default Welcome;
